<template>
  <div class="group-container">
    <div class="group-content">
      <!-- 左侧分类和群组列表 -->
      <div class="group-list">
        <div class="list-header">
          <h2>交流群</h2>
          <a-radio-group v-model="currentType" button-style="solid">
            <a-radio-button value="wechat">
              <a-icon type="wechat" />
              微信群
            </a-radio-button>
            <a-radio-button value="qq">
              <a-icon type="qq" />
              QQ群
            </a-radio-button>
          </a-radio-group>
        </div>

        <div class="search-box">
          <a-input-search
            :placeholder="`搜索${currentType === 'wechat' ? '微信' : 'QQ'}群`"
            @search="onSearch"
            v-model="searchText"
          />
        </div>

        <a-list :data-source="filteredGroups" class="groups">
          <a-list-item 
            slot="renderItem" 
            slot-scope="item" 
            @click="selectGroup(item)" 
            :class="{ active: currentGroup?.id === item.id }"
          >
            <a-list-item-meta>
              <template slot="avatar">
                <a-avatar :src="item.avatar" :size="48">
                  {{ !item.avatar ? item.name.charAt(0).toUpperCase() : '' }}
                </a-avatar>
              </template>
              <template slot="title">
                <span class="group-name">{{ item.name }}</span>
                <a-tag :color="getTagColor(item.category)">{{ item.category }}</a-tag>
              </template>
              <template slot="description">
                <div class="group-desc">{{ item.description }}</div>
                <div class="group-stats">
                  <span>
                    <a-icon type="team" />
                    {{ item.memberCount }}人
                  </span>
                  <span>
                    <a-icon type="user" />
                    群主: {{ item.owner }}
                  </span>
                </div>
              </template>
            </a-list-item-meta>
          </a-list-item>
        </a-list>
      </div>

      <!-- 右侧群组详情 -->
      <div class="group-detail" v-if="currentGroup">
        <div class="detail-header">
          <div class="group-info">
            <a-avatar :src="currentGroup.avatar" :size="64">
              {{ !currentGroup.avatar ? currentGroup.name.charAt(0).toUpperCase() : '' }}
            </a-avatar>
            <div class="info-content">
              <div class="title-row">
                <h2>{{ currentGroup.name }}</h2>
                <a-tag :color="getTagColor(currentGroup.category)">
                  {{ currentGroup.category }}
                </a-tag>
              </div>
              <p class="description">{{ currentGroup.description }}</p>
            </div>
          </div>
        </div>

        <a-divider />

        <div class="detail-content">
          <h3>群组信息</h3>
          <div class="info-grid">
            <div class="info-item">
              <span class="label">群号</span>
              <span class="value">{{ currentGroup.groupId }}</span>
            </div>
            <div class="info-item">
              <span class="label">群主</span>
              <span class="value">{{ currentGroup.owner }}</span>
            </div>
            <div class="info-item">
              <span class="label">成员数</span>
              <span class="value">{{ currentGroup.memberCount }}人</span>
            </div>
            <div class="info-item">
              <span class="label">创建时间</span>
              <span class="value">{{ currentGroup.createTime }}</span>
            </div>
          </div>

          <h3>加群方式</h3>
          <div class="qrcode-section">
            <div class="qrcode-box">
              <img :src="currentGroup.qrcode" alt="群二维码" class="qrcode-image" />
              <p class="qrcode-tip">扫描二维码加入群聊</p>
            </div>
            <div class="join-info">
              <template v-if="currentType === 'qq'">
                <p>
                  <a-icon type="info-circle" />
                  QQ群号：{{ currentGroup.groupId }}
                </p>
                <a-button type="primary" @click="handleJoinQQ">
                  <a-icon type="qq" />
                  点击加入QQ群
                </a-button>
              </template>
              <template v-else>
                <p>
                  <a-icon type="info-circle" />
                  请扫描二维码或添加群主微信号
                </p>
                <p>群主微信号：{{ currentGroup.ownerWechat }}</p>
              </template>
            </div>
          </div>

          <h3>群公告</h3>
          <div class="announcement">
            {{ currentGroup.announcement || '暂无公告' }}
          </div>
        </div>
      </div>

      <!-- 未选择群组时的提示 -->
      <div class="no-group" v-else>
        <a-empty :description="`请选择一个${currentType === 'wechat' ? '微信' : 'QQ'}群`" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Group',
  data() {
    return {
      currentType: 'wechat', // 当前选中的群组类型：wechat/qq
      searchText: '',
      currentGroup: null,
      groupList: [
        {
          id: 1,
          type: 'wechat',
          name: 'Java开发交流群',
          category: '技术交流',
          description: 'Java技术交流，分享学习经验和面试技巧',
          memberCount: 520,
          groupId: 'java-group-001',
          createTime: '2024-01-01',
          owner: '小张',
          ownerWechat: 'zhang001',
          announcement: '欢迎加入Java技术交流群！请大家遵守群规，文明交流。',
          qrcode: 'https://example.com/qr1.jpg' // 这里替换为实际的二维码图片地址
        },
        {
          id: 2,
          type: 'wechat',
          name: '前端技术群',
          category: '技术交流',
          description: '前端开发交流，分享最新技术动态',
          memberCount: 486,
          groupId: 'frontend-001',
          createTime: '2024-01-15',
          owner: '小李',
          ownerWechat: 'li001',
          announcement: '欢迎加入前端技术交流群！分享使用Vue3的心得。',
          qrcode: 'https://example.com/qr2.jpg'
        },
        {
          id: 3,
          type: 'qq',
          name: 'Python学习群',
          category: '学习交流',
          description: 'Python编程学习交流',
          memberCount: 800,
          groupId: '123456789',
          createTime: '2024-02-01',
          owner: '小王',
          announcement: '欢迎加入Python学习群！',
          qrcode: 'https://example.com/qr3.jpg'
        }
      ]
    }
  },
  computed: {
    filteredGroups() {
      return this.groupList.filter(group => 
        group.type === this.currentType &&
        (this.searchText === '' || 
         group.name.toLowerCase().includes(this.searchText.toLowerCase()))
      )
    }
  },
  methods: {
    selectGroup(group) {
      this.currentGroup = group
    },
    onSearch(value) {
      this.searchText = value
    },
    getTagColor(category) {
      const colors = {
        '技术交流': 'blue',
        '学习交流': 'green',
        '求职内推': 'purple'
      }
      return colors[category] || 'blue'
    },
    handleJoinQQ() {
      // 使用QQ群号跳转到加群页面
      if (this.currentGroup?.groupId) {
        window.open(`https://qm.qq.com/cgi-bin/qm/qr?k=&jump_from=&auth=${this.currentGroup.groupId}`)
      }
    }
  }
}
</script>

<style scoped>
.group-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
}

.group-content {
  display: flex;
  gap: 24px;
  min-height: calc(100vh - 180px);
}

.group-list {
  width: 360px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
}

.list-header {
  padding: 20px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.list-header h2 {
  margin: 0;
  font-size: 18px;
  color: #1f2937;
}

.search-box {
  padding: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.groups {
  flex: 1;
  overflow-y: auto;
}

.groups :deep(.ant-list-item) {
  padding: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.groups :deep(.ant-list-item:hover),
.groups :deep(.ant-list-item.active) {
  background: #f8fafc;
}

.group-name {
  font-size: 16px;
  font-weight: 500;
  margin-right: 8px;
}

.group-desc {
  color: #6b7280;
  font-size: 14px;
  margin-bottom: 8px;
}

.group-stats {
  display: flex;
  gap: 16px;
  color: #9ca3af;
  font-size: 13px;
}

.group-stats span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.group-detail {
  flex: 1;
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.group-info {
  display: flex;
  gap: 16px;
}

.info-content {
  flex: 1;
}

.title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.title-row h2 {
  margin: 0;
  font-size: 24px;
  color: #1f2937;
}

.description {
  color: #6b7280;
  margin: 0;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
  margin: 16px 0 32px;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.label {
  color: #6b7280;
  font-size: 14px;
}

.value {
  color: #1f2937;
  font-size: 16px;
  font-weight: 500;
}

.announcement {
  background: #f8fafc;
  padding: 16px;
  border-radius: 8px;
  color: #4b5563;
  margin: 16px 0 32px;
}

.active-members {
  margin: 16px 0;
}

.no-group {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* 响应式调整 */
@media (max-width: 768px) {
  .group-content {
    flex-direction: column;
  }

  .group-list {
    width: 100%;
  }
}

/* 添加新的样式 */
.qrcode-section {
  display: flex;
  gap: 24px;
  margin: 16px 0 32px;
  background: #f8fafc;
  padding: 24px;
  border-radius: 8px;
}

.qrcode-box {
  text-align: center;
}

.qrcode-image {
  width: 200px;
  height: 200px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 8px;
  background: white;
}

.qrcode-tip {
  margin-top: 8px;
  color: #6b7280;
  font-size: 14px;
}

.join-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}

.join-info p {
  color: #4b5563;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

:deep(.ant-radio-group) {
  display: flex;
  gap: 8px;
}

:deep(.ant-radio-button-wrapper) {
  display: flex;
  align-items: center;
  gap: 4px;
}

:deep(.ant-radio-button-wrapper .anticon) {
  font-size: 16px;
}
</style>